<template>
	<!-- 应急指挥 -->
	<view class="p-10">
		<u-sticky>
			<view class="bg-white p-5">
				<u-tabs lineColor="#2172FC" :current="currentKey" :list="[{name: '应急预案'},{name: '应急组织'},{name: '应急专家'},{name: '应急物资'}]" lineWidth="50" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}"
					@change="selectChange"></u-tabs>
			</view>
		</u-sticky>
		<view class="p-10 m-t-10 bg-white">
			<template v-if="currentKey == 0">
				<view class="p-10 m-t-10" style="background: #F1F6FC;" v-for="(item,index) in list">
					<view class="flex m-between m-b-5">
						<text>发布人: {{item.title}}</text>
						<text style="color: #2472F1;">{{item.time}}</text>
					</view>
					<text>类型: {{item.type}}</text>
				</view>
			</template>
			<template v-else-if="currentKey == 1">
				<u-cell-group>
					<u-cell :title="item.title" :isLink="true" :value="item.value + '人'" v-for="(item,index) in list2"></u-cell>
				</u-cell-group>
			</template>
			<template v-else-if="currentKey == 2">
				<view class="p-10 m-t-10" style="background: #F1F6FC;" v-for="(item,index) in list1">
					<view class="flex m-between m-b-5">
						<text>发布人: {{item.title}}</text>
						<text style="color: #2472F1;">{{item.phone}}</text>
					</view>
					<view class="flex m-between">
						<text>专业: {{item.pro}}</text>
						<text>擅长类型: {{item.type}}</text>
					</view>
				</view>
			</template>
			<template v-else>
				<uni-table ref="table" emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" width="50">名称</uni-th>
						<uni-th align="center" width="50">数量</uni-th>
						<uni-th align="center" width="50">单位</uni-th>
						<uni-th align="center" width="50">物资库</uni-th>
						<uni-th align="center" width="50">状态</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center"><u--text :text="item.name" size="12" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value" size="12" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="12" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="12" c bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value3" size="12" color="#00B578" bold="true" align="center"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</template>
		</view>
	</view>
</template>

<script setup>
	let currentKey = ref(0),
		list = ref([{
			title: '边坡灾害应急方案',
			time: '2024-1-2',
			type: '边坡'
		}, {
			title: '边坡灾害应急方案',
			time: '2024-1-2',
			type: '边坡'
		}, {
			title: '边坡灾害应急方案',
			time: '2024-1-2',
			type: '边坡'
		}]),
		list1 = ref([{
			title: '边坡灾害应急方案',
			phone: '18466464645',
			pro: '采煤工程',
			type: '1212'
		}, {
			title: '边坡灾害应急方案',
			phone: '18466464645',
			pro: '采煤工程',
			type: '1212'
		}, {
			title: '边坡灾害应急方案',
			phone: '18466464645',
			pro: '采煤工程',
			type: '1212'
		}]),
		list2 = ref([{
			title: '应急救援指挥部',
			value: 12
		}, {
			title: '应急办公室',
			value: 12
		}, {
			title: '抢险救援组',
			value: 12
		}, {
			title: '医疗救援组',
			value: 12
		}, {
			title: '善后处理组',
			value: 12
		}]),
		tableData = ref([{
			name: '盘索绳',
			value: '45',
			value1: '个',
			value2: '库1',
			value3: '在线'
		}, {
			name: '盘索绳',
			value: '45',
			value1: '个',
			value2: '库1',
			value3: '在线'
		}, {
			name: '盘索绳',
			value: '45',
			value1: '个',
			value2: '库1',
			value3: '在线'
		}])
	const selectChange = ({
		index
	}) => {
		currentKey.value = index
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-scroll-view-content uni-view) {
		flex-grow: 1;
	}
</style>